import { Chart, MarkNode } from "@antv/g2";
import { Http } from "@b/model/base/http";
import { REANIMATIONTIME, EQUIPMENT } from "@b/model/enum";
import { cloneDeep } from "lodash";
export class Box1 {
    chart?: Chart;
    timer: any;
    width: number;
    height: number
    mark?: MarkNode;
    constructor(width: string, height: string) {
        this.timer = null
        this.width = parseInt(width)
        this.height = parseInt(height)
    }
    async init() {
        const { width, height } = this
        this.chart = new Chart({
            container: document.getElementById('box1') as HTMLElement,
            width, height,
            theme: 'classicDark',
            // title: '设备共享统计'
        })
        this.chart.data([])
        this.mark = this.chart.interval().encode('x', 'name').encode('y', 0)
            .encode('size', 30).encode('color', ['#ffffff00']).style('radius', 15).style('fillOpacity', 0.25).tooltip(false)
        this.chart.interval()
            .axis('x', { grid: false, title: false, tick: false, labelFill: '#f9e433', labelFontSize: 16, labelOpacity: 1, labelFontWeight: 700 })
            .axis('y', { grid: false, title: false, labelFontSize: 16, labelFontWeight: 700, labelOpacity: 1 })
            .encode('x', 'name')
            .encode('y', 'value')
            .encode('color', 'name')
            .scale('y', {
                type: 'log'
            })
            .scale('color', {
                range: ['#356616', '#fca63b', '#0f2e5c', '#50222a', '#00e462', '#fbe744', '#0061df', '#d90025'],
            })
            .style('radius', 15).style('minHeight', 10).animate('enter', { type: 'fadeIn' }).animate('update', { type: 'growInY' })
            .encode('size', 30).style('cursor', 'pointer').legend(false)
        await this.chart.render();
    }
    async changeData(search: string) {
        clearTimeout(this.timer)
        let max = 0
        const res: { name: string, value: number }[] = await new Http().request('/v1/bigscreen/GetDeviceSharedAnalyseOrder', { method: 'GET', parames: { type: search }, cache: true })
        const data: { name: string; value: number }[] = []
        let count = 0
        EQUIPMENT.forEach((value, key) => {
            const index = res.findIndex(item => item.name === key)
            const item = res[index]
            if (item) {
                if (max < item.value)
                    max = item.value
                data.push({ name: value, value: item.value })
            } else {
                data.push({ name: value, value: 0 })
            }
        })
        res.forEach(item => {
            if (!EQUIPMENT.has(item.name))
                count += item.value
        })
        if (max < count)
            max = count
        data.push({ name: '其他', value: count })
        const r = cloneDeep(data)
        this.mark?.encode('y', max + 5)
        this.chart?.changeData(r)
        this.timer = setTimeout(() => {
            this.changeData(search)
        }, REANIMATIONTIME);
    }
}